<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="../../css/mui.css"/>
		<link href="../../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="../../css/general.css"/>
		<link rel="stylesheet" type="text/css" href="../../css/mui.picker.min.css"/>
		<link rel="stylesheet" type="text/css" href="../../css/mui.poppicker.css"/>
		<style type="text/css">
			.content{
				width: 100%;
			}
			
			.place button{
				width:100%;
				color: #676664 !important;
			    border: 0 !important;
			    padding: 11px 15px;
			 	text-align: right;
			}
			.mui-input-row .mui-btn {
			    float: right;
			    width: 60%;
			    padding: 11px 15px;
			}
			.dlkg{
    	display: flex;
    	justify-content: center;
    	align-items: center;
    	/*padding: 0.5em 0.5em;*/
    }
    .dlkg>.mui-input-row,.dlkg>div{
    	width: 50%;
    }
   .mui-input-row label~input{
	    float: right;
	    width: 50%;
	    margin-bottom: 0;
	    padding-left: 0;
	    border: 0;
	}

	.timeselect{
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}	
	.timeselect>label{
		width: 25%;
	}
	.timeselect>.place{
		min-width: 30%;
		text-align: center;
	}		
	
	
	
			.flex-row-between>.left{
				width: 20%;
			}
			.left>img{
				border-radius: 50%;
				width: 100%;
			}
			.flex-row-between>.right{
				height: auto;
				width: 100%;
				padding: 0 0 0 0.6em;
			}
			.flex-row-between>span{
				padding: 0.2em 0;
			}
			.flex-row-between>.ldiv{
				width: 50%;
				margin: 0;
				padding: 0;
			}
			.flex-row-start>input{
				width: 60%;
				font-size: 1em;
				border: 1px solid #C7C7C7 !important;
			}
			
			.flex-col-aicent-jcsb{
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: space-between;
			}
.accordion .opened-for-codepen {
  display: none;
}

		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav hbg">
		    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left colorw"></a>
		    <h1 class="mui-title">预约时间段列表</h1>
		    <div class="hicon mui-icon-right-nav mui-pull-right" id="addemp">
		    	<img src="../../img/add.png"/>
		    </div>
		</header>
		<div class="mui-content">
		    
		    <div class="content" id="mlist">
		    	
		    </div>
		</div>
		<script src="../../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/mui.min.js"></script>
		<script src="../../js/mui.picker.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/mui.poppicker.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/city.data.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/city.data-3.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/req.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/muishow.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			window.onload = function(){
				
				mui.init();
				
				get_release_list();
				
				
				g("addemp").addEventListener("tap",function(){
					go_releaseTheBooking();
				})
				
				mui('body').on('tap', '.mui-table-view .mui-btn.mui-btn-blue', function(event) {
					
					go_releaseTheBooking($(this).attr("data-id"));
					
				});
				
				mui('body').on('tap', '.mui-table-view .mui-btn.mui-btn-red', function(event) {
					var elem = this;
					var li = elem.parentNode.parentNode;
					var btnArray = ["取消","确定"];
					mui.confirm('确认删除？', '', btnArray, function(e) {
						if (e.index == 1) {
							var id = $(elem).attr("data-id");
							
							var data = {
								url:"/api/appointment/del_time",
								data:{
									access_token:acctoken(),
									time_id:id
								}
							}
							ajax(data,function(res){
								mui.toast(res.msg);
								get_release_list();
							})
							
						} else {
							setTimeout(function() {
								mui.swipeoutClose(li);
							}, 0);
						}
					});
									
				});
			}
			function go_releaseTheBooking(rid){
				mui.openWindow({
					url:'releaseTheBooking.html?rid='+rid||"",
					id:'releaseTheBooking'
				})
				
			}
			
			function get_release_list(){
				var data = {
					url:"/api/appointment/list_time",
					data:{
						access_token:acctoken(),
					}
				}
				ajax(data,function(res){
					console.log(res);
					set_release_list(res.data.data);
				})
			}
			
			function set_release_list(list){
				var str = "";
				if(list.length){
					list.forEach(function(item,index){
						str += '<ul class="mui-table-view"><li class="mui-table-view-cell">'+
							'<div class="mui-slider-right mui-disabled">'+
							'<a name="add" data-id="'+item.id+'" class="mui-btn mui-btn-blue ">编辑</a>'+
							'<a name="del" data-id="'+item.id+'" class="mui-btn mui-btn-red ">删除</a>'+
							'</div>'+
							'<div class="mui-slider-handle">'+
							'<div class="maindiv flex-row-between">'+
				    		'<div class="right flex-col-aicent-jcsb fe09">'+
				    		'<div class="flex-row-between">'+
				    		'<span id="">时间段: '+
				    		item.start_time+ ' ~ ' +item.end_time+
				    		'</span><span id="">'+
				    		item.count+
				    		'次</span></div>'+
				    		'<div class="flex-row-between">'+
			    			'<div class="flex-row-start ldiv">'+
			    			'<div class="fe08">'+
			    			'</div>'+
					    	'</div>'+
			    			'</div></div></div></div></div></li>';
					})
							str +='<ul>';
						
						}else{
							str = '<div class="nolistdiv">暂无数据<div>';
						}
						g("mlist").innerHTML = str;
				
			}
			
			
			function onshow(){
				get_release_list();
			}
		</script>
	</body>

</html>